import React from "react";
import { StyleSheet, Text, Dimensions, View, StatusBar, Image, TouchableOpacity } from "react-native";
import { Divider } from "@rneui/themed";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const IconNavBar = (props) => {

    const handlePressLeft = () => {
        if (typeof (props.handlePressLeft) === 'function') {
            props.handlePressLeft()
        }
    }

    const handlePressRight = () => {
        if (typeof (props.handlePressRight) === 'function') {
            props.handlePressRight()
        }
    }

    const handlePressRightTitle = () => {
        if (typeof (props.handlePressRightTitle) === 'function') {
            props.handlePressRightTitle()
        }
    }

    return (
        <View style={{ ...styles.container, backgroundColor: props.backgroundColor }}>
            <StatusBar backgroundColor={props.backgroundColor} barStyle={props.barStyle} />
            {props.isTitleCenter ?
                <View style={styles.content1}>
                    <TouchableOpacity onPress={handlePressLeft} style={styles.content1_left}>
                        {props.isShowLeftIcon ?
                            <Image source={props.imgLeftPath} style={props.imgLeftStyle} />
                            : <></>}
                    </TouchableOpacity>
                    <View style={styles.content1_center}><Text style={props.titleStyle}>{props.title}</Text></View>
                    <View style={styles.content1_right}>
                        {props.isShowRightIcon ?
                            <TouchableOpacity onPress={handlePressRight}><Image source={props.imgRightPath} style={props.imgRightStyle} /></TouchableOpacity>
                            : <></>}
                        <TouchableOpacity onPress={handlePressRightTitle}>
                            <Text style={{ ...props.rightTitleStyle, marginLeft: 15 * ratio }}>{props.rightTitle}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                :
                <View style={styles.content2}>
                    <View style={styles.content2_left}>
                        {props.isShowLeftIcon ?
                            <TouchableOpacity onPress={handlePressLeft}><Image source={props.imgLeftPath} style={props.imgLeftStyle} /></TouchableOpacity>
                            : <></>}
                        <Text style={{ ...props.titleStyle, marginLeft: 15 * ratio }}>{props.title}</Text>
                    </View>
                    <View style={styles.content2_right}>
                        {props.isShowRightIcon ?
                            <TouchableOpacity onPress={handlePressRight}>
                                <Image source={props.imgRightPath} style={props.imgRightStyle} />
                            </TouchableOpacity>
                            : <></>}
                        <TouchableOpacity onPress={handlePressRightTitle}>
                            <Text style={{ ...props.rightTitleStyle, marginLeft: 15 * ratio }}>{props.rightTitle}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            }
            {props.showDivider && <Divider color="#E9E9EA" style={{ marginTop: 8 * ratio }} />}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        width: width,
        paddingTop: 15 * ratio
    },
    content1: {
        flexDirection: 'row'
    },
    content1_left: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'flex-start',
        paddingLeft: 15 * ratio
    },
    content1_center: {
        flex: 6,
        justifyContent: 'center',
        alignItems: 'center'
    },
    content1_right: {
        flex: 2,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        marginRight: 15 * ratio
    },
    content2: {
        flexDirection: 'row'
    },
    content2_left: {
        flex: 8,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginLeft: 15 * ratio
    },
    content2_right: {
        flex: 2,
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginRight: 15 * ratio
    }
})
export default IconNavBar;